<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名路由和命名视图</title>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <h1>Hello App</h1>
        <p>
            <router-link :to="{name : 'foo_name', params : {id : 1}}">命名路由</router-link>
            <router-link to="/foo/1">原始路由</router-link>
            <router-link to="/foo/2/profile">嵌套视图</router-link>
            <router-link to="/bar">Go to bar</router-link>
        </p>

        <router-view></router-view>
    </div>

<script>
    const Foo = {
        template : '<div> <h2>Foo- {{ $route.params.id }}</h2><router-view></router-view></div>',
        watch : {
            '$route' (to, from) {
                console.log('watch---', to, from);
            }
        },
        beforeRouteUpdate  (to, from, next){
            console.log('before---to-', to)
            console.log('before---from-', from)
            console.log('before---next-', next)

            //*********************************************************************************
            //
            //    这里要注意，/foo/1 和 /foo/1/profile
            //    都是调用一个组件，vue在相同组件重复使用时给予缓存，所以在组件发生变化是必须要触发next()方法
            //
            //*********************************************************************************
            next()
        }
    }
    const Bar = {template : '<div>bar</div>'}
    const Profile = {template : '<div>my name is profile</div>'};


    const routes = [
        {
            //命名路由，在使用时直接使用名称
            name : 'foo_name',
            path : '/foo/:id', component : Foo,
            children : [
                // 当 /foo/:id/profile 匹配成功，
                // FooProfile 会被渲染在 Foo 的 <router-view> 中
                {
                    path : 'profile',
                    component : Profile
                },
                // 默认视图
                {
                    path : '',
                    component : {template : '<div>there is default view</div>'}
                }
            ]
        },
        {path : '/bar', component : Foo}
    ]

    const router = new VueRouter({
        routes  //缩写，相当于 routers : routers
    });

    const app = new Vue({
        router
    }).$mount("#app");
</script>
</body>
</html>